<app-content [url]="url" [columns]="columns" (clickId)="viewHandler($event)">
  <div class="form-group">
    <label class="control-label col-sm-1">账号</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" [(ngModel)]="username">
    </div>
    <label class="control-label col-sm-1">状态</label>
    <div class="col-sm-3">
      <select class="form-control" [(ngModel)]="status">
        <option [value]="true">启用</option>
        <option [value]="false">禁用</option>
      </select>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary" (click)="search()">查询</button>
    </div>
  </div>

  <div id="toolbar" class="btn-group">
    <button type="button" class="btn btn-primary" (click)="add()">
      <span class="glyphicon glyphicon-plus"></span>新增
    </button>
    <button type="button" class="btn btn-info" (click)="edit()">
      <span class="glyphicon glyphicon-pencil"></span>编辑
    </button>
    <button type="button" class="btn btn-danger" (click)="delete()">
      <span class="glyphicon glyphicon-remove"></span>删除
    </button>
    <button type="button" class="btn btn-warning" (click)="pwd()">
      <span class="glyphicon glyphicon-lock"></span>修改密码
    </button>
  </div>
</app-content>
<!-- 管理员窗口 开始-->
<div class="modal fade" id="adminModal">
  <div class="modal-dialog">
    <form [formGroup]="adminForm" (ngSubmit)="save()" novalidate>
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
          <h3 class="modal-title">{{title}}</h3>
        </div>
        <div class="modal-body">
          <div class="input-group" [class.has-error]="adminForm.get('username').touched && adminForm.hasError('required','username')">
            <span class="input-group-addon">账号:</span>
            <input type="text" class="form-control" formControlName="username" [(ngModel)]="admin.username">
          </div>
            <span class="help-block" [class.hidden]="adminForm.get('username').untouched || !adminForm.hasError('required','username')">
              账号不能为空
            </span>
          <br>
          <div class="input-group" *ngIf="showpwd===true" [class.has-error]="adminForm.get('password').touched && (adminForm.hasError('minlength','password') || adminForm.hasError('required','password'))">
            <span class="input-group-addon">密码:</span>
            <input type="password" class="form-control" formControlName="password" [(ngModel)]="admin.password">
          </div>
          <span class="help-block" [class.hidden]="adminForm.get('password').untouched || !adminForm.hasError('required','password')">
              密码不能为空
            </span>
          <span class="help-block" [class.hidden]="adminForm.get('password').untouched || !adminForm.hasError('minlength','password')">
              请至少输入6位数
          </span>
          <br *ngIf="showpwd===true">
          <div class="input-group">
            <span class="input-group-addon">状态:</span>
            <select class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="admin.status">
              <option [value]="true">启用</option>
              <option [value]="false">禁用</option>
            </select>
          </div>
          <br>
          <div class="input-group">
            <span class="input-group-addon">手机号:</span>
            <input type="tel" class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="admin.phone">
          </div>
          <br>
          <div class="input-group">
            <span class="input-group-addon">邮箱:</span>
            <input type="email" class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="admin.email">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">提交</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 修改密码窗口 开始-->
<div class="modal fade" id="pwdModal">
  <div class="modal-dialog">
    <form [formGroup]="pwdForm" (ngSubmit)="modifyPwd()" novalidate>
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
          <h3 class="modal-title">{{title}}</h3>
        </div>
        <div class="modal-body">
          <div class="input-group" [class.has-error]="pwdForm.get('oldpassword').touched && (pwdForm.hasError('minlength','oldpassword') || pwdForm.hasError('required','oldpassword'))">
            <span class="input-group-addon">原密码:</span>
            <input type="password" class="form-control" formControlName="oldpassword" [(ngModel)]="adminPwd.oldpassword">
          </div>
          <span class="help-block" [class.hidden]="pwdForm.get('oldpassword').untouched || !pwdForm.hasError('required','oldpassword')">
              原密码不能为空
            </span>
          <span class="help-block" [class.hidden]="pwdForm.get('oldpassword').untouched || !pwdForm.hasError('minlength','oldpassword')">
              请至少输入6位数
            </span>
          <br>

          <div formGroupName="passwordsGroup">
            <div class="input-group" [class.has-error]="pwdForm.get(['passwordsGroup','password']).touched && (pwdForm.hasError('minlength',['passwordsGroup','password']) || pwdForm.hasError('required',['passwordsGroup','password']))">
              <span class="input-group-addon">新密码:</span>
              <input type="password" class="form-control" formControlName="password" [(ngModel)]="adminPwd.password">
            </div>
            <span class="help-block" [class.hidden]="pwdForm.get(['passwordsGroup','password']).untouched || !pwdForm.hasError('required',['passwordsGroup','password'])">
              新密码不能为空
            </span>
            <span class="help-block" [class.hidden]="pwdForm.get(['passwordsGroup','password']).untouched || !pwdForm.hasError('minlength',['passwordsGroup','password'])">
              请至少输入6位数
            </span>
            <br>
            <div class="input-group" [class.has-error]="pwdForm.get('passwordsGroup').touched && pwdForm.hasError('equal', 'passwordsGroup')">
              <span class="input-group-addon">确认密码:</span>
              <input type="password" class="form-control" formControlName="pconfirm" [(ngModel)]="adminPwd.pconfirm">
            </div>
            <div [hidden]="!pwdForm.hasError('equal', 'passwordsGroup')">
              {{pwdForm.getError('equal', 'passwordsGroup')?.description}}
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">提交</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </form>
  </div>
</div>
